<template>
  <div class="index">
    <div class="common-layout">
      <el-container>
        <el-header>
          <div class="header">
            <div class="left" style="height: 60px">
              <img src="../assets/images/logo.png" alt="" />
            </div>
            <div class="right">
              <div class="main">
                <div class="maxer">
                  <div class="tou">
                    <img src="../../public/favicon.ico" alt="" @click="router.push('/maxindex/quit')">
                  </div>
                  <div class="you">
                    管理平台
                  </div>
          
                </div>
              </div>
            </div>
          </div>
        </el-header>
        <el-container>
          <el-aside width="200px">
            <el-menu
              active-text-color="#ffd04b"
              background-color="#545c64"
              text-color="#fff"
              @select="handClick"
              router
            >
              <FpBable></FpBable>
              <LiuKun></LiuKun>
              <LiHuanQin></LiHuanQin>
              <ZhangWei></ZhangWei>
              <YanMengDe></YanMengDe>
            </el-menu>
          </el-aside>
          <!-- 展示区域 -->
          <el-main style="backgroundColor:#eff2f8;">
            <RouterView />
          </el-main>
        </el-container>
      </el-container>
    </div>
  </div>
</template>

<script setup>
import FpBable from "./fp/FpBable.vue";
import LiuKun from "./liukun/LiuKun.vue";
import LiHuanQin from "./lihuanqin/LiHuanQin.vue";
import ZhangWei from "./zhangwei/ZhangWei.vue";
import YanMengDe from "./yanmengde/YanMengDe.vue";

import { useRouter } from "vue-router";
let router = useRouter();

const handClick = (parameter) => {
  router.push(parameter);
};
</script>

<style lang='scss' scoped>
*{
  margin: 0;
  padding: 0;
}
.header {
  width: 100%;
  height: 100%;
  background-color: #f2f2f2;
  padding: none;
  .left {
    width: 230px;
    height: 60px;
    background-color: red;
    position: absolute;
    left: 0;
    top: 0;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .right {
    width: 200px;
    height: 60px;
    // background-color: red;
    float: right;
    .main {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      .maxer {
        width: 60%;
        height: 60%;
        // background-color: pink;
        display: flex;
        justify-content: space-around;
        align-items: center;
        .tou {
          width:30%;
          height: 90%;
          border-radius: 50%;
          img {
            width: 100%;
            height: 100%;
            border-radius: 50%;
          }
        }
        .you {
          width: 50%;
          height: 50%;
          font-size: 14px;
        }
      }
    }
  }
}
.el-container {
  width: 100%;
  height: 100%;
  // background-color: aqua;
  .el-header {
    width: 100%;
    height: 60px;
    background-color: #f2f2f2;
  }
  .el-aside {
    width: 15%;
    height: 652px;
    background-color: #4e5e6d;
    .el-col-12 {
      max-width: none;
      height: 650px;
    }
  }
  .el-main {
    flex: 1;
    height: 650px;
    background-color: rgba(109, 71, 0, 0.49);
  }
}
</style>